<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            /* 表格宽度占父元素宽度的80% */
        }

        th,
        td {
            border: 2px double #000;
            padding: 8px;
            text-align: center;
        }

        button {
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>欢迎光临_vue开发的收银系统_水果店</p>
        <table>
            <thead>
                <th>苹果 {{price}} ￥/斤，折扣< {{disCount}} 折>
                </th>
            </thead>
            <tbody>
                <tr>
                    <td>
                        请输入你要购买的斤数
                        <input type="number" v-model="quantity">
                    </td>
                </tr>
                <tr>
                    <td><button @click="pay">结账买单~</button></td>
                </tr>
                <tr>
                    <td>
                        结账单：总价：{{total}}￥元 折后价：{{disCountTotal}}￥元 省了：{{saved}}￥元
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                price: 10,
                disCount: 8,
                quantity: 0,
                total: 0,
                disCountTotal: 0,
                saved: 0
            },
            watch: {
                quantity(newValue) {
                    if (newValue < 0) {
                        this.quantity = 0
                    }
                }
            },
            methods: {
                pay() {
                    this.total = this.price * this.quantity
                    this.disCountTotal = this.total * (this.disCount / 10)
                    this.saved = this.total - this.disCountTotal
                }
            }
        })
    </script>
</body>

</html>